<!--
 * @Author: your name
 * @Date: 2021-06-13 10:15:05
 * @LastEditTime: 2021-06-21 17:24:23
-->
<template>
  <div ref="myel">
    <el-table
      ref="singleTable"
      border
      fit
      :data="memberList"
      style="width:100%">
      <el-table-column type="selection" align="center" width="50" fixed="left"></el-table-column>
      <el-table-column property="userName" align="center" label="姓名" width="80"></el-table-column>
      <el-table-column property="departmentName" align="center" label="所属部门" width="150"></el-table-column>
      <el-table-column property="age" align="center" label="年龄" width="80"></el-table-column>
      <el-table-column property="organizationName" align="center" label="所属机构" width="150"></el-table-column>
      <el-table-column property="nativePlace" align="center" label="籍贯" width="400"></el-table-column>
      <el-table-column property="folk" align="center" label="民族" width="100"></el-table-column>
      <el-table-column property="education" align="center" label="学历" width="150"></el-table-column>
      <el-table-column property="phone" align="center" label="手机号" width="120"></el-table-column>
      <el-table-column label="操作" align="center" width="100px" fixed="right">
        <span class="opt-button">编辑</span>
        <span class="opt-button">删除</span>
      </el-table-column>
    </el-table>
    <!-- 分页模块 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryForm.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="queryForm.pageSize"
      :total="total" 
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>  
</template>

<script>
import Member from '@/api/member.js';

let el;
let tableBodyWrapDom;
let tableBodyDom;

function handle() {
  if (!el) return;
  // top为dom上侧距离可视窗口顶部的值
  const { top: tableBodyDomTop } = tableBodyWrapDom.getBoundingClientRect();  
  if (tableBodyDomTop > window.innerHeight || tableBodyWrapDom.classList.contains('is-scrolling-none')) {
    // 此时列表在可视窗口的下侧不可见区域，因此不做任何修改
    tableBodyWrapDom.style.height = 'unset'
    tableBodyWrapDom.style.marginBottom = 'unset';
  } else {
    // 窗口高度 - 列表距顶部值 且 不超过自身实际值
    let wrapHeight = Math.min(window.innerHeight - tableBodyDomTop, tableBodyDom.offsetHeight);
    tableBodyWrapDom.style.height = wrapHeight + 'px';
    // 需要用marginBottom填充，以保持列表原有高度，避免页面的纵向滚动条变化导致页面滚动的不流畅
    tableBodyWrapDom.style.marginBottom = (tableBodyDom.offsetHeight - wrapHeight) + 'px';
  }
}

import {
  ref,
  toRefs,
  reactive,
  onMounted,
  onUnmounted,
  watch,
  nextTick
} from "vue";
export default {
  name: 'memberManage',
  setup() {
    let total = ref(254); // 数据条数
    let myel = ref(null);
    let singleTable = ref(null);
    let data = reactive({
      memberList: [{}],
      queryForm: {
        currentPage: 1,
        pageSize: 10,
      }
    })

    onMounted(() => {
      console.log("挂载");
      el = myel.value
      tableBodyWrapDom = el.querySelector('.el-table__body-wrapper');
      tableBodyDom = el.querySelector('.el-table__body');
      singleTable.value.handleFixedMousewheel = function() {};
      
      // 监听事件
      document.addEventListener('scroll', handle);
      window.addEventListener('resize', handle);
    })

    onUnmounted(() => { // 在组件销毁时取消监听
      console.log("销毁");
      document.removeEventListener('scroll', handle);
      window.removeEventListener('resize', handle);
    })

    // 通过watch来监听
    watch(() => data.memberList, () => {
      console.log("列表数据改变了")
      nextTick(handle)
    })


    const queryMemberList = () => { // 查询列表数据
      Member.getMemberList().then(res => { 
        data.memberList = res.data
      }).catch(error => {
        console.log(error);
      })
    }

    const handleSizeChange = (pageSize) => {
      console.log("分页数据大小", pageSize);
       data.queryForm.pageSize = pageSize;
    }

    const handleCurrentChange = (currentPage) => {
      data.queryForm.currentPage = currentPage;
      queryMemberList();
    }

    let param = toRefs(data);

    queryMemberList();

    return {
      myel,
      singleTable,
      total,
      ...param,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style lang="scss" scoped>
.opt-button {
  color: #409eff;
  margin: 0px 2px;
}
</style>